<template>
  <div class="navlist">
    <ul>
      <li v-for="(item, index) in $store.state.browseList" :key="index">
        <router-link
          :style="$store.state.current.path == item.path ? 'color:#409EFF' : ''"
          class="routerlink"
          :to="item.path"
          >{{ item.title }}</router-link
        >
        <i
          v-if="item.path != '/workform'"
          @click="delNav(item)"
          class="el-icon-close"
        ></i>
      </li>
    </ul>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "others",
          label: "清除其他",
        },
        {
          value: "all",
          label: "清除全部",
        },
      ],
      value: "",
    };
  },
  watch: {
    value() {
      // console.log(this.$route.path)
      if (this.value == "others") {
        this.$store.commit("delothersbrowseList");
      } else if (this.value == "all") {
        this.$store.commit("delallbrowseList");
        if (this.$route.path != "/workform") {
          this.$router.push("/workform");
        }
      }
      this.value = "";
    },
  },
  methods: {
    // 删除导航
    delNav(data) {
      this.$store.commit("delcurrent", data);
      // console.log(data.path,this.$route.path)
      if (data.path == this.$route.path) {
        this.$router.push(this.$store.state.current.path);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .navlist::-webkit-scrollbar {
//   display: none;
// }
.navlist {
  height: 100%;
  height: 48px;
  line-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
  ul {
    // max-width: 1200px;
    display: flex;
    align-items: center;
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    // overflow-x: scroll;

    li {
      // position: absolute;
      // min-width: 120px;
      text-align: center;
      height: 32px;
      line-height: 32px;
      background-color: #fff;
      padding: 0 5px;
      margin-right: 5px;
      border-radius: 3px;
      cursor: pointer;
      .routerlink {
        color: #808695;
        font-size: 14px;
        text-decoration: none;
      }
      i {
        margin-left: 10px;
        color: #808695;
      }
    }
  }
}

.el-select {
  max-width: 120px !important;
  min-width: 120px !important;
  margin-left: 20px;
}
.el-input__inner {
  height: 35px !important;
}
</style>